<template>
  <view class="dashboard-container">
    <!-- Enhanced Dashboard Header -->
    <view class="dashboard-header">
      <view class="header-content">
        <view class="header-main">
          <text class="dashboard-title">物联IOT大数据</text>
          <view class="dashboard-subtitle">实时数据监控平台</view>
        </view>
        <view class="status-indicators">
          <view class="status-item online">
            <view class="status-dot"></view>
            <text class="status-text">设备状态: 在线</text>
          </view>
         
        </view>
      </view>
      <view class="header-progress">
        <view class="progress-bar" :style="{width: '85%'}"></view>
      </view>
    </view>

    <!-- Data Panels Section -->
    <view>
      <view class="data-panel1" id="view1" style="">
          <view class="panel-title">开关状态</view>
          <view style="width: 100%;height:350px;" id="dataview1">
            <view style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; padding: 20px;">
              <view v-for="i in 10" :key="i" style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
                <text style="color: #ffffff; font-size: 16px;">开关 {{i}}</text>
                <view style="margin-top: 10px; width: 20px; height: 20px; border-radius: 50%; background: #3b82f6; margin: 10px auto;" :style="{background: i % 2 ? '#3b82f6' : '#ef4444'}"></view>
                <text style="color: #ffffff; font-size: 14px; display: block; margin-top: 5px;">{{i % 2 ? '开启' : '关闭'}}</text>
              </view>
            </view>
          </view>
          <view class="panel-title">警告信息</view>
          <view style="width: 100%;height:240px;margin-top: 10px;" id="dataview2">
            <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px; margin-bottom: 10px;">
            <text style="color: #ffffff; font-size: 14px;">警告 1: </text>
            <text style="color: #ef4444; font-size: 14px;margin-left: 30px;">流量异常 · 2023/10/15 14:30:22</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px; margin-bottom: 10px;">
            <text style="color: #ffffff; font-size: 14px;">警告 2: </text>
            <text style="color: #ef4444; font-size: 14px;margin-left: 30px;">压力过高 · 2023/10/15 14:28:45</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px; margin-bottom: 10px;">
            <text style="color: #ffffff; font-size: 14px;">警告 3: </text>
            <text style="color: #ef4444; font-size: 14px;margin-left: 30px;">温度异常 · 2023/10/15 14:25:10</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px; margin-bottom: 10px;">
            <text style="color: #ffffff; font-size: 14px;">警告 4: </text>
            <text style="color: #ef4444; font-size: 14px;margin-left: 30px;">通讯中断 · 2023/10/15 14:20:33</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 14px;">警告 5: </text>
            <text style="color: #ef4444; font-size: 14px;margin-left: 30px;">设备离线 · 2023/10/15 14:15:47</text>
          </view>
         
          </view>
      </view> 
      <view id="viewpic" style="position: relative; ">
        <image src="/static/image/1224.png" mode="widthFix" style="width: 100%;"></image>
        <!-- <view style="position: absolute; top: 20px; left: 20px; font-size: 24px; color: #ffffff; font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);">
          传感器数值
        </view> -->
        <!-- <view style="position: absolute; top: 80px; left: 20px; right: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 16px;">传感器 1</text>
            <text style="color: #3b82f6; font-size: 20px; font-weight: bold; display: block; margin-top: 8px;">25.6°C</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 16px;">传感器 2</text>
            <text style="color: #3b82f6; font-size: 20px; font-weight: bold; display: block; margin-top: 8px;">60%</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 16px;">传感器 3</text>
            <text style="color: #3b82f6; font-size: 20px; font-weight: bold; display: block; margin-top: 8px;">1024hPa</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 16px;">传感器 4</text>
            <text style="color: #3b82f6; font-size: 20px; font-weight: bold; display: block; margin-top: 8px;">0.5m/s</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 16px;">传感器 5</text>
            <text style="color: #3b82f6; font-size: 20px; font-weight: bold; display: block; margin-top: 8px;">800lux</text>
          </view>
          <view style="background: rgba(0,0,0,0.6); padding: 15px; border-radius: 8px;">
            <text style="color: #ffffff; font-size: 16px;">传感器 6</text>
            <text style="color: #3b82f6; font-size: 20px; font-weight: bold; display: block; margin-top: 8px;">7.2pH</text>
          </view>
        </view> -->
      </view>
      <view class="data-panel3" id="view3" style="">
        <view class="panel-title">传感器数据</view>
        <view style="width: 100%;height:450px;" id="dataview3">
          <view style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px;">
            <view v-for="i in 20" :key="i" style="background: rgba(0,0,0,0.6); padding: 10px; border-radius: 6px;">
              <text style="color: #ffffff; font-size: 14px;">传感器 {{i}}</text>
              <text style="color: #3b82f6; font-size: 16px; font-weight: bold; display: block; margin-top: 6px;">{{(Math.random() * 100).toFixed(2)}} m³/h</text>
              
            </view>
          </view>
        </view>
        <view class="panel-title">温度变化曲线图</view>
        <view style="width: 100%;height:300px;margin-top: 10px;padding: 15px;" id="dataview4">
          <view class="charts-box">
							<!-- 此处改变的是 seriesTemplate 模板中的默认配置，不必每个series都传smooth:true，将会覆盖:chartData.series 实现更低的代码量 -->
							<qiun-data-charts type="line" 
                :opts="{
                  extra:{
                    line:{type:'curve'}
                  },
                  textStyle: {
                    color: '#ffffff'
                  },
                  xAxis: {
                    axisLabel: {
                      color: '#ffffff'
                    }
                  },
                  yAxis: {
                    axisLabel: {
                      color: '#ffffff'
                    }
                  }
                }"
								:eopts="{seriesTemplate:{smooth:true}}" 
                :chartData="chartsDataLinehumidity" 
                :echartsH5="true"
								:echartsApp="true" />
						</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import demodata from '@/mockdata/lyhdemodata.json';
	export default {
		data() {
			return {
		
				chartsDataLinehumidity:{}
			}
		},
		onReady() {
			
			setInterval(() => {
				this.getServerData();
			}, 10000);
			
			
			// setTimeout(() => {
			// 	this.getServerData();
			// }, 1000);

			//演示变更数据后显示loading状态，如果不想展示loading状态，则不需要此步，可以注释掉看效果
			//  setTimeout(() => {
			//    this.chartsDataLineEC.series=[];
			// this.chartsDataLinePH.series=[];
			//  }, 4000);

			setTimeout(() => {

				//测试动态绑定的eopts
				this.ringOpts = {
					color: ['#FF00FF', '#AAFF11'],
					legend: {
						show: false
					}
				}
			}, 5000);
		},
		methods: {
			async getPruductStateValue(pmodelno,key,name,rows) {
				const ret = await this.$myRequest({
					url: "/api/product/v1/Charts/getModelCharts",
					data: {
						pguid: uni.getStorageSync('productGuid'),
						pmodelno:pmodelno,
						key:key,
						name:name,
						rows:rows
					}
				})
				//debugger
				if (ret.respCode == "200") {
					
					this.chartsDataLinetemperature=ret.data;
					
					console.log('sucess' + JSON.stringify(ret.data));

				} 

			},

			detail(id) {
				alert(id);
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			},
			getServerData() {

				//因部分数据格式一样，这里不同图表引用同一数据源的话，需要深拷贝一下构造不同的对象
				//开发者需要自行处理服务器返回的数据，应与标准数据格式一致，注意series的data数值应为数字格式
				this.chartsDataLinehumidity = JSON.parse(JSON.stringify(demodata.LineEC));
				
			},
			complete(e) {
				console.log("渲染完成事件", e);
			},
			getIndex(e) {
				console.log("获取点击索引事件", e);
			}
		},

		onLoad() {
			this.getServerData();
			/* 列表 */
			//	this.getPruductStateValue(3,"humidity","湿度", 10);
		}
	}
</script>


<style lang="scss">

.dashboard-container {
  padding: 20px;
  background-color: #0f172a;

  color: #f8fafc;
  position: fixed; /* 使背景层固定定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左边对齐 */
  right: 0; /* 右边对齐 */
  bottom: 0; /* 底部对齐 */
  z-index: -1; /* 确保背景在其他内容之下 */
}

.dashboard-header {
  margin-bottom: 10px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-main {
  flex: 1;
}

.status-indicators {
  display: flex;
  gap: 20px;
  margin-left: 30px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-item.online .status-dot {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.status-item.warning .status-dot {
  background: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.status-text {
  font-size: 14px;
  color: #94a3b8;
}

.header-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  transition: width 0.3s ease;
}

.dashboard-title {
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(99, 102, 241, 0.8);
  background: linear-gradient(45deg, #3b82f6, #6366f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dashboard-subtitle {
  font-size: 18px;
  color: #94a3b8;
  margin-top: 8px;
  font-weight: 500;
}


.panel-title {
  font-size: 20px;
  color: #94a3b8;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #334155;
}


#viewpic {
  width: 450px;
  height: 730px;
  float: left;
  aspect-ratio: auto;
  margin-left: 50px;
  margin-right: 50px;
}

#view1, #view3 {
  width:  calc((100% - 630px) / 2);
  height: 730px;
  aspect-ratio: 1;
  float: left;
  margin: 5px;
}

	
	
	
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	
	.charts-box {
		width: 100%;
		height: 200px;
	}
	
	.imagetu image {
		width: 98%;
		margin: 3px;
	
	}
	
	
</style>
